<template>
    <div>
    <van-index-bar :index-list=num>
        <div v-for="(v,i) in item" :key="i">
        <van-index-anchor  :index='v.index'>{{v.index}}</van-index-anchor>
        <div v-for="(vs,is) in v.children" :key="is">
          <dl @click="sub(vs.id)">
              <dt>
                  <img :src='vs.img' alt="" />
              </dt>
              <dd>
                  <p><b>{{vs.title}}</b></p>
              </dd>
          </dl>
        </div>
        </div>
        
   </van-index-bar>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {mapActions} from 'vuex';
import {State,Action,Mutation} from 'vuex-class'
//  computed:{
//         ...mapState(['list'])
//     }

@Component({
    ...mapActions(['SET_DETAIL']),
    methods:{
        sub(id){
         this.$router.push({name:'Detail',params:{id}})
         this.$store.commit('SET_DETAIL',id)
        }
    }
})
export default class Car extends Vue {
//  @State('list') list?:[]
  @State('item') item?:[]
   @State('num') num?:[]
 @Action('GET_LIST') getList:any
//  @Mutation('GST_LIST') gstList:any
 created(){
     this.getList()
 }
 
}
</script>

<style lang="scss" scoped>
  dl{
      width: 100%;
      height: 120px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      padding: 0 20px;
      dt{
          margin-right: 10px;
      }
  }
</style>